import SwiftUI

struct CatalogView: View {
    var body: some View {
        NavigationStack {
            VStack(spacing: 1) {
                Divider()
                    .background(
                        LinearGradient(colors: [.red, .yellow, .blue], startPoint: .topLeading, endPoint: .bottomTrailing)
                            .opacity(0.7)
                            .shadow(.drop(radius: 2, x: 0, y: 2))
                    )
                
                makeListView()
            }
            .navigationTitle("SwiftUI Handbook")
            .navigationBarTitleDisplayMode(.large)
        }
    }
    
    func makeListView() -> some View {
        List {
            Section {
                NavigationLink {
                    HStackView()
                } label: {
                    HStack {
                        Image(systemName: "square.stack.3d.forward.dottedline")
                        Text("HStack View")
                    }
                }
                
                NavigationLink {
                    VStackView()
                } label: {
                    HStack {
                        Image(systemName: "square.3.layers.3d.top.filled")
                        Text("VStack View")
                    }
                }
                
                NavigationLink {
                    ZStackView()
                } label: {
                    HStack {
                        Image(systemName: "square.stack.3d.down.forward")
                        Text("ZStack View")
                    }
                }
                
                NavigationLink {
                    GeometryReaderIntroView()
                } label: {
                    HStack {
                        Image(systemName: "arrow.up.and.down.and.arrow.left.and.right")
                        Text("GeometryReader Introdcution")
                    }
                }
                
                NavigationLink {
                    GeometryReaderSizeView()
                } label: {
                    HStack {
                        Image(systemName: "arrow.up.and.down.and.arrow.left.and.right")
                        Text("GeometryReader Size")
                    }
                }
                
                NavigationLink {
                    GeometryReaderPositioningView()
                } label: {
                    HStack {
                        Image(systemName: "arrow.up.and.down.and.arrow.left.and.right")
                        Text("GeometryReader Positioning")
                    }
                }


                
                NavigationLink {
                    PullInViewDemo()
                } label: {
                    HStack {
                        Image(systemName: "arrow.down.right.and.arrow.up.left")
                        Text("Pull In View")
                    }
                }
                
                NavigationLink {
                    PushOutViewDemo()
                } label: {
                    HStack {
                        Image(systemName: "arrow.up.backward.and.arrow.down.forward")
                        Text("Push Out View")
                    }
                }
                
                NavigationLink {
                    ListViewDemo()
                } label: {
                    HStack {
                        Image(systemName: "list.bullet.rectangle.fill")
                        Text("List View")
                    }
                }
            } header: {
                Text("Layout")
                    .font(.footnote)
                    .foregroundColor(.pink)
                    .fontWeight(.bold)
            } footer: {
                Text("Count: 6")
                    .foregroundColor(.yellow)
                    .font(.footnote)
                    .fontWeight(.bold)
            }
            
            Section {
                NavigationLink {
                    ButtonIntroduction()
                } label: {
                    HStack {
                        Image(systemName: "button.programmable")
                        Text("Button introduction")
                    }
                }
                
                NavigationLink {
                    ButtonBackground()
                } label: {
                    HStack {
                        Image(systemName: "button.programmable.square.fill")
                        Text("Button background")
                    }
                }
                
                NavigationLink {
                    ButtonBorder()
                } label: {
                    HStack {
                        Image(systemName: "button.programmable.square")
                        Text("Button border")
                    }
                }
            } header: {
                Text("UI elements")
                    .font(.footnote)
                    .foregroundColor(.brown)
                    .fontWeight(.bold)
            } footer: {
                Text("Count: 3")
                    .font(.footnote)
                    .fontWeight(.bold)
                    .foregroundColor(.yellow)
            }
            
            
            Section {
                NavigationLink {
                    NoAnimationView()
                } label: {
                    HStack {
                        Image(systemName: "mountain.2")
                        Text("No Animation")
                    }
                }
                
                NavigationLink {
                    WithAnimationView()
                } label: {
                    HStack {
                        Image(systemName: "moonphase.waning.crescent")
                        Text("With Animation")
                    }
                }
                
                NavigationLink {
                    AnimationCurves()
                } label: {
                    HStack {
                        Image(systemName: "moonphase.waning.crescent")
                        Text("Animation Curves")
                    }
                }
                
                NavigationLink {
                    AnimatableAttributes_Color()
                } label: {
                    HStack {
                        Image(systemName: "drop.keypad.rectangle.fill")
                        Text("Color animation")
                    }
                }
                
                NavigationLink {
                    AnimatableAttributes_Hue()
                } label: {
                    HStack {
                        Image(systemName: "drop.keypad.rectangle.fill")
                        Text("Hue animation")
                    }
                }
                
                NavigationLink {
                    AnimatableAttributes_Opacity()
                } label: {
                    HStack {
                        Image(systemName: "togglepower")
                        Text("Opacity animation")
                    }
                }
                
                NavigationLink {
                    AnimatableAttributes_Rotation()
                } label: {
                    HStack {
                        Image(systemName: "rotate.left.fill")
                        Text("Rotation animation")
                    }
                }
                
                NavigationLink {
                    AnimatableAttributes_Anchor()
                } label: {
                    HStack {
                        Image(systemName: "rotate.right.fill")
                        Text("Anchor animation")
                    }
                }
                
                NavigationLink {
                    AnimatableAttributes_Text()
                } label: {
                    HStack {
                        Image(systemName: "textformat.size")
                        Text("Text animation")
                    }
                }
                
                NavigationLink {
                    AnimationPractice()
                } label: {
                    HStack {
                        Image(systemName: "star.fill")
                        Text("Animation Practice")
                    }
                }
            } header: {
                Text("Animations")
                    .font(.footnote)
                    .foregroundColor(.indigo)
                    .fontWeight(.bold)
            } footer: {
                Text("Count: 10")
                    .font(.footnote)
                    .fontWeight(.bold)
                    .foregroundColor(.yellow)
            }
            
            
            Section {
                NavigationLink {
                    BasicChartView()
                } label: {
                    HStack {
                        Image(systemName: "chart.bar.xaxis")
                        Text("Basic chart")
                    }
                }
                
                NavigationLink {
                    ChartWithData()
                } label: {
                    HStack {
                        Image(systemName: "chart.bar.xaxis")
                        Text("Chart with Data")
                    }
                }
                
                NavigationLink {
                    ChartWithObject()
                } label: {
                    HStack {
                        Image(systemName: "chart.bar.xaxis")
                        Text("Chart with Object")
                    }
                }
                
                NavigationLink {
                    OtherChartMarks()
                } label: {
                    HStack {
                        Image(systemName: "chart.bar.xaxis")
                        Text("Other chart marks")
                    }
                }
                
                NavigationLink {
                    ChartAnnotation()
                } label: {
                    HStack {
                        Image(systemName: "chart.bar.xaxis")
                        Text("Chart annotation")
                    }
                }
                
                NavigationLink {
                    ChartLabel()
                } label: {
                    HStack {
                        Image(systemName: "chart.bar.xaxis")
                        Text("Chart label")
                    }
                }
                
                NavigationLink {
                    CustomPointChart()
                } label: {
                    HStack {
                        Image(systemName: "chart.bar.xaxis")
                        Text("Custom Point Chart")
                    }
                }

            } header: {
                Text("Chart")
                    .font(.footnote)
                    .foregroundColor(.green)
                    .fontWeight(.bold)
            } footer: {
                Text("Count: 3")
                    .font(.footnote)
                    .fontWeight(.bold)
                    .foregroundColor(.yellow)
            }
            
            
            Section {
                // 罗列我们写过的所有的界面
                // 每一行是一个 NavigationLink
                NavigationLink {
                    ContentView()
                } label: {
                    HStack {
                        Image(systemName: "list.bullet.rectangle.fill")
                        Text("Content View")
                    }
                }
            } header: {
                Text("Misc")
                    .font(.footnote)
                    .foregroundColor(.teal)
                    .fontWeight(.bold)
            } footer: {
                Text("Count: 1")
                    .font(.footnote)
                    .fontWeight(.bold)
                    .foregroundColor(.yellow)
            }
            
        }
        .listStyle(.automatic)
    }
}

struct ListRowItem: View {
    var body: some View {
        NavigationLink {
            
        } label: {
            
        }
    }
}
